// src/pages/articlePage/filterForm/index.tsx
import React from "react";
import styles from "./index.module.css";
import { connect, MapDispatchToPropsParam, MapStateToPropsParam } from "react-redux";
import { AppState, AppThunkDispatch } from "@src/index";
import { ChannelActions } from "@actions/channelActions";
import { ChannelCreators } from "@store/creators/channelCreators";
import { ChannelState } from "@reducers/channelReducer";
import Channel from "@shared/channel";
interface StateProps {
    channelReducer: ChannelState;
}
interface DispatchProps {
    requestChannel(): Promise<ChannelActions.Actions>
}
interface OwnProps { }
type Props = OwnProps & StateProps & DispatchProps;
class FilterForm extends React.Component<Props>{
    async componentDidMount() {
        await this.props.requestChannel()
    }
    channels() {
        const { channelReducer } = this.props;
        const { channels } = channelReducer;
        if (channels.status === "loading") return <option>loading...</option>;
        if (channels.status === "error") return <option>{channels.error}</option>;
        if (channels.status === "success") {
            return channelReducer.channels.result.map((channel) => (
                <option key={channel.id} value={channel.id}>
                    {channel.name}
                </option>
            ));
        }
        return null;
    }
    render() {
        return (
            <form className={styles.filterForm}>
                <div className="field is-horizontal mb-5">
                    <div className="field-label">
                        <label className="label">状态：</label>
                    </div>
                    <div className="field-body">
                        <label className="radio mr-3">
                            <input type="radio" name="status" className="mr-1" />
                            全部
                        </label>
                        <label className="radio mr-3">
                            <input type="radio" name="status" className="mr-1" />
                            草稿
                        </label>
                        <label className="radio mr-3">
                            <input type="radio" name="status" className="mr-1" />
                            待审核
                        </label>
                        <label className="radio mr-3">
                            <input type="radio" name="status" className="mr-1" />
                            审核通过
                        </label>
                        <label className="radio mr-3">
                            <input type="radio" name="status" className="mr-1" />
                            审核失败
                        </label>
                    </div>
                </div>
                <div className="field is-horizontal mb-5">
                    <div className="field-label is-normal">
                        <label className="label">频道：</label>
                    </div>
                    <div className="field-body">
                        <div className="select">
                            <select>
                                <option>请选择文章频道</option>
                                {this.channels()}
                            </select>
                        </div>
                    </div>
                </div>
                <div className="field is-horizontal mb-5">
                    <div className="field-label is-normal">
                        <label className="label">日期：</label>
                    </div>
                    <div className="field-body">
                        <input className="input" type="text" placeholder="请选择日期" />
                    </div>
                </div>
                <div className="field is-horizontal">
                    <div className="field-label is-normal">
                        <button className="button is-link">筛选</button>
                    </div>
                    <div className="field-body"></div>
                </div>
            </form>
        );
    }
}

const mapStateToProps: MapStateToPropsParam<StateProps, OwnProps, AppState> = (state) => ({
    channelReducer: state.channelReducer,
});
const mapDispatchToProps: MapDispatchToPropsParam<DispatchProps, OwnProps> = (dispatch: AppThunkDispatch) => ({
    requestChannel: () => dispatch(ChannelCreators.requestChannel()),
});
export default connect(mapStateToProps, mapDispatchToProps)(FilterForm)